<template>
  <div>
    <div class="w-form-header">
      <!-- <span>
                <span style="margin-right: 8px">首办单详情</span
                ><span style="font-size: 16px; font-weight: 500">{{
                    detailFormData.status
                }}</span>
                <el-tag style="font-size: 16px; font-weight: 500; margin-left: 16px;">{{ detailFormData.printStatus }}</el-tag>
            </span> -->
      <div v-if="!isViewOp">
        <!-- <el-button  type="primary" @click="print('1')">打印预览</el-button> -->
        <el-button type="primary" @click="preview">打印预览</el-button>
        <!-- <el-button type="primary" v-if="leiyinBtn" @click="print()">列印</el-button> -->
        <!-- <el-button type="primary" @click="print()">打印</el-button> -->
        <!-- <el-button v-if="saveBtn" type="success" @click="confirmNoReasonForm()">保存草稿</el-button
                > -->
          <template v-if="userStore.userInfo.authority?.authorityId !== 1000">
            <el-button
              v-if="editBtn"
              type="success"
              @click="submitupdateForm('修改')"
              >{{ detailFormData.status === "草稿" ? "编辑" : "修改" }}</el-button
            >
            <el-button
              v-if="stopBtn"
              type="warning"
              @click="updateStatus('暫停', true)"
              >暫停</el-button
            >
            <el-button
              v-if="cancelBtn"
              type="danger"
              @click="updateStatus('終止', true)"
              >終止</el-button
            >
            <el-button
              v-if="rebackBtn"
              v-auth="btnAuth.rebackBtn"
              type="danger"
              @click="updateStatus('退回', true)"
              >退回</el-button
            >
            <el-button
              v-if="recoverBtn"
              type="danger"
              @click="updateStatus('恢復', true)"
              >恢復</el-button
            >
            <el-button
              v-if="completeBtn"
              v-auth="btnAuth.completeBtn"
              type="success"
              @click="updateStatus('完成', true)"
              >完成</el-button
            >
            <!-- <el-button v-if="checkSuccessBtn" type="success">审核通过</el-button> -->
            <!-- <el-button v-if="equipmentPrintBtn" type="primary">已列印</el-button> -->
            <el-button
              v-if="submitHandleBtn1"
              type="success"
              @click="updateStatus('提交', true)"
              >提交</el-button
            >
            <el-button
              v-if="submitHandleBtn"
              v-auth="btnAuth.submitHandleBtn"
              type="success"
              @click="updateStatus('提交', true)"
              >提交</el-button
            >
            <el-button
              v-if="agreeUpdateBtn"
              v-auth="btnAuth.agreeBtn"
              type="success"
              @click="updateStatus('同意', true)"
              >同意</el-button
            >
            <el-button
              v-if="refuseUpdateBtn"
              v-auth="btnAuth.refuseBtn"
              type="danger"
              @click="updateStatus('拒絕', true)"
              >拒絕</el-button
            >
            <el-button
              v-if="customerSubmitBtn"
              :disabled="detailFormData.verifyTime"
              type="danger"
              @click="confirmOrder"
              >客户确认</el-button
            >
            <!-- <el-button v-if="applyWorkflowBtn" type="success" @click="applyWork">申请审批</el-button> -->
            <el-button
              v-if="exportDocumentBtn"
              v-auth="btnAuth['导出备料清单']"
              type="primary"
              @click="firstOrderProcessingExportFun()"
              >导出备料清单</el-button
            >
            <el-button
              v-if="toSapBtn"
              v-auth="btnAuth.toSapBySuper"
              :loading="createInSapByHandLoading"
              type="primary"
              @click="createInSapByHandFun()"
              >汇入SAP</el-button
            >
          </template>
       
      </div>

      <div class="title-box" style="margin-left: auto;position: relative;">
        <span class="version">
          版本: {{ detailFormData.version || "暂无" }}</span
        >
        <span v-if="!isViewOp" class="status">{{ detailFormData.status }}</span>

        <span
          v-if="!isViewOp"
          style="font-size: 16px; color: #999; margin-left: 20px"
          >{{ detailFormData.printStatus }}</span
        >
            <div style="position: absolute;bottom: -38px;right: 20px;font-size: 16px;white-space: nowrap;z-index: 100;">
                辦單付數:{{ detailFormData.orderAmountSum }}
            </div>
      </div>
    </div>
    <div class="gva-form-box admin-content">
      <div class="w-form-box">
        <div class="list-header">基本信息</div>
      </div>
      <defailForm
        :columns="detailFormColumns"
        :data="detailFormData"
        separator=":"
      >
        <template #customerDemandDate>
          <el-date-picker
            v-model="detailFormData.customerDemandDate"
            type="date"
            disabled
            value-format="YYYY-MM-DDTHH:mm:ssZ"
            placeholder="选择日期"
            :clearable="true"
          ></el-date-picker>
        </template>
        <template #transferOrder>
          <el-select
            disabled
            v-model="detailFormData.transferOrder"
            :clearable="true"
          >
            <el-option
              v-for="item in dict?.transferOrder"
              :key="item.ID"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
        <template #createUser>
          <span
            v-if="
              detailFormData.createdUser && detailFormData.createdUser.nickName
            "
          >
            {{ detailFormData.createdUser.nickName }}
          </span>
          <span v-else>{{ detailFormData.createUser }}</span>
        </template>
        <template #updateUser>
          <span
            v-if="
              detailFormData.updatedUser && detailFormData.updatedUser.nickName
            "
          >
            {{ detailFormData.updatedUser.nickName }}
          </span>
          <span v-else>{{ detailFormData.updateUser }}</span>
        </template>
        <template #FirstCreatedAt>
         
          <span > {{formatDate(detailFormData.FirstCreatedAt )=="1-01-01" ? '' : formatDate(detailFormData.FirstCreatedAt ) }}</span>
        </template>
      </defailForm>
      <el-form
        ref="formDataRef"
        label-position="right"
        :model="basicForm"
        style="margin-top: 20px"
        label-width="120px"
      >
        <el-row style="width: 100%" :gutter="20">
          <el-col :span="24">
            <el-form-item :label="`制作部門：`">
              <el-select
                :disabled="isViewOp||!btnAuth['制作部门']"
                v-model="detailFormData.productionDepartment"
                @change="productionDepartmentChange"
                :clearable="false"
              >
                <el-option
                  v-for="item in dict?.productionDepartment"
                  :key="item.ID"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="测试项目备注：">
              <el-input
                type="textarea"
                v-model="basicForm.testProjectNote"
                disabled
                :autosize="{ minRows: 1 }"
                :maxlength="500"
                show-word-limit
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="首办单备注：">
              <el-input
                type="textarea"
                v-model="basicForm.firstOrderNote"
                disabled
                :autosize="{ minRows: 1 }"
                :maxlength="500"
                show-word-limit
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          
          <!-- <el-col :span="24">
            <el-form-item :label="`修改备注:`" prop="modifyNote">
              <el-input
                type="textarea"
                v-model="detailFormData.modifyNote"
                disabled
                :autosize="{ minRows: 1 }"
                :maxlength="500"
                show-word-limit
                placeholder=""
                :clearable="true"
              />
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div class="w-form-box">
        <div class="list-header">办房复期</div>
      </div>
      <LTable
        :columns="boardMakingColumns"
        :tableData="boardMakingTalbeData"
        :pagination="false"
        :selection="false"
        :showConfig="false"
        :tableProps="{}"
      >
        <template #action>
          <div class="gva-btn-list" v-if="userStore.userInfo.authority?.authorityId !== 1000">
            <el-button
              type="primary"
              icon="plus"
              :disabled="isViewOp"
              @click="addBoardMaking"
              >添加</el-button
            >
          </div>
        </template>
        <template #event>
          <el-table-column
            align="left"
            label="操作"
            fixed="right"
            min-width="260"
          >
            <template #default="{ row }">
              <el-button
                v-if="row.status === '审核中'"
                type="primary"
                link
                class="table-button"
                @click="auditBoardMaking(row)"
              >
                <el-icon style="margin-right: 5px">
                  <InfoFilled />
                </el-icon>
                审核
              </el-button>
            </template>
          </el-table-column>
        </template>
        <template #status="{ row }">
          <span v-if="row.status === '审核中'">审核中</span>
          <span v-if="row.status === '通过'" style="color: #67c23a">通过</span>
          <span v-if="row.status === '拒绝'" style="color: #f56c6c">拒绝</span>
        </template>
      </LTable>
      <div class="w-form-box">
        <div class="list-header">尺码</div>
      </div>
      <LTable
        v-if="sizeTableData.length <= 0"
        :columns="sizeColumns"
        :tableData="sizeTableData"
        :pagination="false"
        :selection="false"
        :showConfig="false"
        :tableProps="{}"
      ></LTable>
      <LTable
        v-else
        :columns="sizeColumns"
        :tableData="sizeTableData"
        :pagination="false"
        :selection="false"
        :showConfig="false"
        :tableProps="{
          showSummary: true,
          summaryMethod: getSumaryMethod,
        }"
      >
        <template #color="{ row, column }">
          <el-input
            v-model="row.colorNum[column.prop]"
            disabled
            @input="validNumber(row.colorNum, column.prop)"
          />
        </template>
        <template #luckTilt="{ row }">
          <span
            ><el-input-number
              :controls="false"
              disabled
              style="width: 60px; height: 28px"
              :max="255"
              :min="0"
              v-model="row.luckTilt"
          /></span>
        </template>
        <template #drawingList="{ row }">
          <!-- <el-select v-model="row.drawingList" disabled :clearable="true">
                        <el-option
                            v-for="item in ddmsSpecDrawingListListData"
                            :key="item.fileUrl"
                            :label="item.drawingName"
                            :value="item.fileUrl"
                        />
                    </el-select> -->
          <span v-if="row.drawingName"
            >{{ row.drawingName }}&emsp;<a
              href="javascript:void(0)"
              @click="downloadFile(row)"
              >下载</a
            ></span
          >
        </template>
      </LTable>
      <div class="w-form-box">
        <div class="list-header">做色要求</div>
      </div>
      <LTable
        :columns="colorColumns"
        :tableData="colorTableData"
        :pagination="false"
        :selection="false"
        :showConfig="false"
        :tableProps="{}"
      >
      </LTable>
      <div >
        <div class="w-form-box">
          <div class="list-header">与上版本配件对比</div>
        </div>
        <!-- <div class="version-PK">
          <el-descriptions title="" :column="1" border>
            <el-descriptions-item label="新增配件" label-align="center">{{
              addAccessory.join(",")
            }}</el-descriptions-item>
            <el-descriptions-item
              label="删除配件"
              label-class-name="delete-acc"
              label-align="center"
              >{{ deleteAccessory.join(",") }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->
        <div>
          <el-table
              :data="[{
                addAccessory:addAccessory,
                deleteAccessory:deleteAccessory,
                modifyNote:detailFormData.modifyNote
              }]"
              border
              style="width: 100%"
              class="table-style-1"
          >
              <el-table-column
                  label="新增配件"
                  prop="addAccessory"
                  :min-width="'20%'"
              >
                <template #default="{ row }">
                  <div v-for="item in addAccessory">{{item}}</div>
                </template>
              </el-table-column>
              <el-table-column
                  label="删除配件"
                  prop="deleteAccessory"
                  :min-width="'20%'"
              >
                <template #default="{ row }">
                  <div v-for="item in deleteAccessory">{{item}}</div>
                </template>
              </el-table-column>
              <el-table-column
                  label="修改备注"
                  prop="modifyNote"
                  :min-width="'60%'"
              >
              </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="w-form-box">
        <div class="list-header">配件规格清单</div>
      </div>
      <LTable
        :columns="partColumns"
        :tableData="partTableData"
        :pagination="false"
        :selection="false"
        :showConfig="false"
        :tableProps="{
          defaultExpandAll: true,
          rowKey: 'ID',
          treeProps: {
            children: 'children',
            hasChildren: 'hasChildren',
          },
        }"
      >
      </LTable>
      <div class="w-form-box">
        <div class="list-header">标志\图案工艺说明</div>
      </div>
      <LTable
        :columns="signColumns"
        :tableData="signTableData"
        :pagination="false"
        :selection="false"
        :showConfig="false"
        :tableProps="{}"
      >
      </LTable>
      <!-- <div class="w-form-box">
        <div class="list-header">测试标准</div>
      </div>
      <LTable
        :columns="testStandardColumns"
        :tableData="testStandardDocumentListData"
        :pagination="false"
        :selection="false"
        :showConfig="false"
        :tableProps="{}"
      >
      </LTable> -->
      <!-- <div class="w-form-box">
        <div class="list-header">历史修改备注</div>
      </div>
      <LTable
        :columns="historyNoteColumns"
        :tableData="historyNoteTableData"
        :pagination="false"
        :selection="false"
        :showConfig="false"
        :tableProps="{}"
      >
      </LTable> -->
      <div class="w-form-box">
                <div class="list-header">操作修改记录</div>
            </div>
            <el-table :data="historyNoteTableData" border style="width: 100%" >
              <el-table-column prop="date" label="操作人" width="80"  >
                <template #default="scope" >
                 <div style="width: 10px;height: 5px;"@dblclick="showhistoryNoteTableData(scope.row)"></div>   {{ scope.row.operator== "" ? scope.row.createUser : scope.row.operator== "" ? scope.row.updateUser : scope.row.operator}}
                </template>
              </el-table-column>
              
              <el-table-column prop="UpdatedAt" label="操作时间" width="140"  >
                <template #default="scope">{{ formatDateS(scope.row.UpdatedAt)}}</template>
              </el-table-column>
              <el-table-column prop="action" label="操作" />
              <el-table-column prop="dataBefore" label="操作前" />
              <el-table-column prop="dataAfter" label="操作後" />
              <!-- <el-table-column prop="content" label="更改内容" /> -->
              <!-- <el-table-column prop="reason" label="更改原因" /> -->
              <!-- <el-table-column prop="detail" label="详细说明" /> -->
              <el-table-column prop="" label="版本" width="60" >
                <template #default="scope">{{ scope.row.version}}</template>
              </el-table-column>
            </el-table>
            <el-dialog v-model="historyNoteTableDatadialog" title="" width="800">
                <pre>{{ historyNoteTableDatas }}</pre>
            </el-dialog>
    </div>

    <!-- 添加备注 -->
    <!-- <el-dialog
      v-model="addNoteDialogFormVisible"
      destroy-on-close
      width="50%"
      title="添加修改备注"
    >
      <el-form
        ref="addNoteFormRef"
        style="display: flex"
        inline
        :model="addNoteForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="内容分类：">
              <el-checkbox-group v-model="addNoteForm.content">
                <el-checkbox
                  v-for="item in contentCate"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原因分类：">
              <el-checkbox-group v-model="addNoteForm.reason">
                <el-checkbox
                  v-for="item in reasonCate"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="详细说明：" style="width: 100%">
              <textarea
                v-model="addNoteForm.detail"
                :rows="5"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmEditForm('修改')"
            >确定</el-button
          >
          <el-button
            @click="(addNoteForm = {}), (addNoteDialogFormVisible = false)"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog> -->

    <!-- 添加办房付期 -->
    <el-dialog
      v-if="boardMakingVisible"
      v-model="boardMakingVisible"
      destroy-on-close
      width="50%"
      title="办房复期"
    >
      <el-form ref="boardMakingFormRef" :model="boardMakingForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="复期日期：">
              <el-date-picker
                v-model="boardMakingForm.deliveryDate"
                type="date"
                value-format="YYYY-MM-DDTHH:mm:ssZ"
                placeholder="选择日期"
                :clearable="true"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="详细说明：" style="width: 100%">
              <textarea
                v-model="boardMakingForm.detailDescription"
                :rows="5"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="addBoardMakingSubmit"
            >确定</el-button
          >
          <el-button
            @click="(boardMakingForm = {}), (boardMakingVisible = false)"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>

    <!-- 审核办房付期 -->
    <el-dialog
      v-if="auditBoardMakingVisible"
      v-model="auditBoardMakingVisible"
      destroy-on-close
      width="50%"
      title="办房复期"
    >
      <el-form ref="auditBoardMakingFormRef" :model="auditBoardMakingForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="复期日期：">
              <el-radio-group v-model="auditBoardMakingForm.status">
                <el-radio
                  value="通过"
                  size="large"
                  border
                  style="color: #67c23a"
                  >通过</el-radio
                >
                <el-radio
                  value="拒绝"
                  size="large"
                  border
                  style="color: #f56c6c"
                  >拒绝</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="详细说明：" style="width: 100%">
              <textarea
                v-model="auditBoardMakingForm.auditDescription"
                :rows="5"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="auditBoardMakingSubmit"
            >确定</el-button
          >
          <el-button
            @click="
              (auditBoardMakingForm = {}), (auditBoardMakingVisible = false)
            "
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>

    <!-- 客户确认首办单 -->
    <el-dialog
      v-if="confirmOrderVisible"
      v-model="confirmOrderVisible"
      destroy-on-close
      width="50%"
      title="客户确认首办单"
    >
      <el-form
        ref="confirmOrderFormRef"
        :model="confirmOrderForm"
        :rules="confirmOrderFormRules"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="客户确认日期：" prop="verifyTime">
              <el-date-picker
                v-model="confirmOrderForm.verifyTime"
                type="date"
                value-format="YYYY-MM-DDTHH:mm:ssZ"
                placeholder="选择日期"
                :clearable="true"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleConfirmOrder">确定</el-button>
          <el-button
            @click="(confirmOrderForm = {}), (confirmOrderVisible = false)"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>

    <!-- 申请审批 -->
    <el-dialog
      v-if="applyWorkVisible"
      v-model="applyWorkVisible"
      destroy-on-close
      width="50%"
      title="申请审批"
    >
      <el-form ref="applyWorkFormRef" :model="applyWorkForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="申请名称：" style="width: 100%">
              <el-input
                v-model="applyWorkForm.title"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="申请信息：" style="width: 100%">
              <textarea
                v-model="applyWorkForm.application_info"
                :rows="5"
                placeholder="请输入"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审批流：" style="width: 100%">
              <!-- <el-select
                                v-model="applyWorkForm.workflowdef_id"
                                placeholder="请选择"
                                style="width: 100%"
                                disabled
                            >
                                <el-option v-for="item in workflowList" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select> -->

              {{ workflowList.name || "" }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitApplyWork">确定</el-button>
          <el-button @click="(applyWorkForm = {}), (applyWorkVisible = false)"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>

    <previewBox
      v-if="previewDialogShow"
      @closePreview="closePreview"
      :printStyle="getPrintStyle()"
      previewType="firstOrderProcessingEdit"
      @print="print"
      @editPrintStatus="editPrintStatus"
    >
      <div>
        <div class="one-box">
          <div class="ftsz10px">
          </div>
          <div style="text-align: center; position: relative; top: -14px;font-weight: bold;">
            首辦單编號： {{ detailFormData.firstOrderNum }}
          </div>
          <div class="ftsz10px" style="margin-right: 10px;font-weight: bold;position: relative;">
            <div style="position: absolute;bottom: 10px;right: 0;">
                版本:{{ detailFormData.version || "暂无" }}
            </div>
            <div style="position: absolute;bottom: -24px;right: 0;">
                辦單付數:{{ detailFormData.orderAmountSum }}
            </div>
          </div>

        </div>

        <div class="content-box">
          <div class="title">基本資料</div>
          <div class="content">

            <div class="descriptions">
            <div class="descriptionsItem" v-for="(item, key) in detailFormColumns" :key="key">
                <span>{{item.label}}：</span><span>{{ item.needformatter?formatDate(detailFormData[item.prop]): detailFormData[item.prop] }}</span>
            </div>
            <div class="descriptionsItem" >
                <!-- <span>硬模编号：</span><span>{{detailFormData.hardMoldNum }}</span> -->
            </div>
            <div class="addLine" >
              <span>設計規格圖：</span><span>{{ sizeTableData.map(item=>item.drawingName).join(',')||'' }}</span>
            </div>
            <div class="addLine" >
              <span>測試項目備注：</span><span>{{ basicForm.testProjectNote }}</span>
            </div>
            <div class="addLine" >
              <span>首辦單備注：</span><span>{{ basicForm.firstOrderNote }}</span>
            </div>
           </div>
          </div>
        </div>

        <div class="content-box table4" v-if="detailFormData.modifyNote">
          <div class="title">与上版本配件对比</div>
          <div class="content" style="border-bottom: 0">
            <div class="myTable-head">
              <div>新增配件</div>
              <div>刪除配件</div>
              <div>修改備注</div>
            </div>
            <div
              class="myTable-content"
              v-for="(item, index) in [{
                addAccessory:addAccessory,
                deleteAccessory:deleteAccessory,
                modifyNote:detailFormData.modifyNote
              }]"
              :key="index"
            >
              <div>
                <div v-for="item in addAccessory">{{item}}</div>
              </div>
              <div>
                <div v-for="item in deleteAccessory">{{item}}</div>
              </div>
              <div>
                {{ item.modifyNote }}
              </div>
             
            </div>
          </div>
        </div>

        <div class="content-box table1" v-if="colorTableData.length">
          <div class="title">做色要求</div>
          <div class="content" style="border-bottom: 0">
            <div class="myTable-head">
              <div> </div>
              <div>客色號</div>
              <div>客款號</div>
              <div>本廠颜色描述</div>
              <div>圈颜色要求</div>
              <div>脾颜色耍求</div>
              <div>其它颜色要求</div>
            </div>
            <div
              class="myTable-content"
              v-for="(item, index) in colorTableData"
              :key="index"
            >
              <div>
                {{ item.colorNum }}
              </div>
              <div>
                {{ item.customerColorNum }}
              </div>
              <div>
                {{ item.customerStyleNum }}
              </div>
              <div>
                {{ item.localColorDesc }}
              </div>
              <div>
                {{ item.circleColorRequire }}
              </div>
              <div>
                {{ item.spleenColorRequire }}
              </div>
              <div>
                {{ item.otherColorRequire }}
              </div>
            </div>
          </div>
        </div>

        <div class="content-box table2" v-if="printPartTableData.length">
          <div class="title">配件及物料清單</div>
          <div class="content" style="border-bottom: 0">
            <div class="myTable-head">
              <div>斋架/配件</div>
              <div>自制/外购</div>
              <div>配件编号</div>
              <div>物料说明</div>
              <div>外观规格</div>
              <div>数量</div>
              <div>单位</div>
              <div>备注</div>
            </div>
            <div
              class="myTable-content"
              v-for="(item, index) in printPartTableData"
              :key="index"
            >
              <div>
                <span
                  :style="{
                    marginLeft:
                      item.selfLevel == 1
                        ? 0
                        : item.selfLevel == 2
                        ? '14px'
                        : '28px',
                  }"
                >
                  {{ item.accessoryName }}</span
                >
              </div>
              <div>
                {{ item.orderType || "" }}
              </div>
              <div>
                {{ item.componentNum+item.colorNum || "" }}
              </div>
              <div>
                {{ item.sapDesc || "" }}
              </div>
              <div>
                {{ item.appearanceSpec || "" }}
              </div>
              <div>
                {{ item.num || "" }}
              </div>
              <div>
                {{ item.unit || "" }}
              </div>
              <div>
                {{ item.note || "" }}
              </div>
            </div>
          </div>
        </div>

        
        <div class="content-box table3" v-if="signTableData.length">
          <div class="title">標志/工藝圖案説明</div>
          <div class="content" style="border-bottom: 0">
            <div class="myTable-head">
              <div>配件名稱</div>
              <div>位置</div>
              <div>工藝</div>
              <div>工藝做色</div>
              <div>新舊</div>
              <div>標志/圖案編號</div>
              <div>尺碼</div>
              <div>顔色</div>
            </div>
            <div
              class="myTable-content"
              v-for="(item, index) in signTableData"
              :key="index"
            >
              <div>
                {{ item.accessoryName }}
              </div>
              <div>
                {{ item.position }}
              </div>
              <div>
                {{ item.workmanship }}
              </div>
              <div>
                {{ item.workmanshipColor }}
              </div>
              <div>
                {{ item.workmanshipType }}
              </div>
              <div>
                {{ item.signNum }}
              </div>
              <div>
                {{ item.size }}
              </div>
              <div>
                {{ item.color }}
              </div>
            </div>
          </div>
        </div>

            
        <!-- <div class="content-box table4" v-if="testStandardDocumentListData.length">
          <div class="title">測試標準</div>
          <div class="content" style="border-bottom: 0">
            <div class="myTable-head">
              <div>測試項目</div>
              <div>是否出測試報告</div>
            </div>
            <div
              class="myTable-content"
              v-for="(item, index) in testStandardDocumentListData"
              :key="index"
            >
              <div>
                {{ item.testName }}
              </div>
              <div>
                {{ item.isReport=='true'?'是':'否' }}
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </previewBox>
  </div>
</template>

<script setup>
import {
  createFirstOrderProcessing,
  updateFirstOrderProcessing,
  findFirstOrderProcessing,
  updateFirstOrderProcessingStatus,
  firstOrderProcessingPrint,
  firstOrderMoldHouseList,
  createFirstOrderMoldHouse,
  updateFirstOrderMoldHouse,
  versionComparison,
  customerConfirmFirstOrderTime,
  updateProductionDepartment,
  firstOrderProcessingExport,
  createInSapByHand,
  moldHousePrint
} from "@/api/plmFirstOrderProcessing";
import {
  getWorkflowDefList,
  createApplication,
  findWorkflowDef,
} from "@/api/workflow";
import { getDdmsSpecDrawingListList } from "@/api/ddmsSpecDrawingList";
import { getTestStandardDocumentList } from "@/api/confTestStandardDocument";
import defailForm from "./components/detailForm/index.vue";
import { deepClone2 } from "@/utils/tool.js";
import { useBtnAuth } from "@/utils/btnAuth";
import { initAccessorySpecs } from "./ptm_common";
import { downloadFilePost } from "@/api/comment.js";
// 全量引入格式化工具 请按需保留
import { formatDate } from "@/utils/format";
import LTable from "@/components/LTable/LTable.vue";
import { useI18n } from "vue-i18n";
import previewBox from "@/components/preview/preview.vue";
const { t: il8n } = useI18n();
defineOptions({
  name: "FirstOrderProcessingEdit",
});
import { useUserStore } from "@/pinia/modules/user";
// 自动获取字典
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, onMounted, watchEffect, unref } from "vue";
import { useDict } from "@/utils/dictionary";
import { emitter } from "@/utils/bus.js";
const router = useRouter();
const route = useRoute();
const btnAuth = useBtnAuth();
console.log(333333,btnAuth);
const type = ref("");
const detailFormColumns = ref([]);

const basicForm = ref({});
const addNoteForm = ref({
  content: null,
  reason: null,
});
const addNoteFormRef = ref();
const userStore = useUserStore();
const detailFormData = ref({
  firstOrderNum: "",
  customerDemandDate: new Date(),
  cumstomerNum: "",
  customerStyleNum: "",
  updateUser: "",
  updateTime: new Date(),
});

const addNoteDialogFormVisible = ref(false);

const sizeColumns = ref([]);
const sizeTableData = ref([]);

const colorColumns = ref([]);
const colorTableData = ref([]);

const sourceAccessorySpecs = ref([]);

const ddmsSpecDrawingListListData = ref([]);

// 储存已有的颜色数据map
const colorMap = ref({});

const partColumns = ref([
  {
    prop: "accessoryName",
    label: "斋架/配件",
    show: true,
    fixedWidth: 200,
    tableColumnProps: {
      sortable: false,
    },
  },
  {
    prop: "orderType",
    label: "自制/外购",
    fixedWidth: 80,
    show: true, // 通过 show 来控制列的展示或隐藏
    tableColumnProps: {
      sortable: false,
    },
  },
  {
    prop: "componentNum",
    label: "配件编号",
    show: true,
    tableColumnProps: {
      sortable: false,
      formatter: (row) =>
        (row.componentNum ? String(row.componentNum) : "") +
        (row.colorNum ? String(row.colorNum) : ""),
    },
  },
  {
    prop: "sapDesc",
    label: "物料说明",
    show: true,
    tableColumnProps: {
      sortable: false,
    },
  },
  {
    prop: "appearanceSpec",
    label: "外观规格",
    fixedWidth: 80,
    show: true,
    tableColumnProps: {
      sortable: false,
    },
  },
  {
    prop: "num",
    label: "数量",
    fixedWidth: 80,
    show: true,
    tableColumnProps: {
      sortable: false,
    },
  },
  {
    prop: "unit",
    label: "单位",
    fixedWidth: 80,
    show: true,
    tableColumnProps: {
      sortable: false,
    },
  },
  // {
  //     prop: "accessoryGroup",
  //     label: "群组",
  //     fixedWidth: 80,
  //     show: true,
  //     tableColumnProps: {
  //         sortable: false,
  //     },
  // },
  {
    prop: "note",
    label: "备注",
    show: true,
    tableColumnProps: {
      sortable: false,
    },
  },
]);
const partTableData = ref([]);

const testStandardColumns = ref([]);
const testStandardDocumentListData = ref([]);

const signColumns = ref([]);
const signTableData = ref([]);

const historyNoteColumns = ref([]);
const historyNoteTableData = ref([]);

const boardMakingColumns = ref([]);
const boardMakingTalbeData = ref([]);

const contentCate = ref([]);
const reasonCate = ref([]);
// 验证规则
const rule = reactive({});

const elFormRef = ref();

// 客户确认首办单
const confirmOrderVisible = ref(false);
const confirmOrderForm = ref({ verifyTime: null });
const confirmOrderFormRef = ref();
const confirmOrderFormRules = ref({
  verifyTime: [{ required: true, message: "请选择确认时间", trigger: "blur" }],
});

// 按钮权限
const printViewBtn = ref(false);
const printBtn = ref(false);
const saveBtn = ref(false);
const editBtn = ref(false);
const stopBtn = ref(false);
const cancelBtn = ref(false);
const recoverBtn = ref(false);
const completeBtn = ref(false);
const checkSuccessBtn = ref(false);
const equipmentPrintBtn = ref(false);
const submitHandleBtn = ref(false);
const submitHandleBtn1 = ref(false);
const agreeUpdateBtn = ref(false);
const refuseUpdateBtn = ref(false);
const rebackBtn = ref(false);
const customerSubmitBtn = ref(false);
const applyWorkflowBtn = ref(true);
const exportDocumentBtn = ref(false);
const toSapBtn = ref(false);
const leiyinBtn = ref(false);

const applyWorkVisible = ref(false);
const applyWorkFormRef = ref();
const applyWorkForm = ref({});
const workflowList = ref([]);

const isViewOp = ref(false);

const boardMakingForm = ref({});
const boardMakingFormRef = ref();

const boardMakingVisible = ref(false);
const changeBoardMakingVisible = (bool) => {
  boardMakingVisible.value = bool;
};

const auditBoardMakingForm = ref({});
const auditBoardMakingFormRef = ref();

const auditBoardMakingVisible = ref(false);
const changeAuditBoardMakingVisible = (bool) => {
  auditBoardMakingVisible.value = bool;
};

const changeAddNoteDialogFormVisible = (bool) => {
  addNoteDialogFormVisible.value = bool;
};


const historyNoteTableDatadialog = ref(false)
const historyNoteTableDatas = ref()
const showhistoryNoteTableData = (row) =>{
    console.log(111);
    
    console.log(row.cmp_diff);
    if(row.cmp_diff){
        historyNoteTableDatadialog.value = true
        
        historyNoteTableDatas.value =row.cmp_diff
        

    }

    
}


// 返回按钮
const back = () => {
  router.go(-1);
};

watchEffect(() => {
  //   基本资料 columns
  const newDetailFormColumns = [
    {
      label: il8n("firstOrderNum.label"),
      prop: "firstOrderNum",
    },
    {
      label: il8n("cumstomerNum.label"),
      prop: "cumstomerNum",
    },
    {
      label: il8n("sheetArcBend.label"),
      prop: "sheetArcBend",
    },
    {
      label: "完成时间",
      prop: "finishTime",
      needformatter:true,
      formatter: (finishTime) => formatDate(finishTime),
    },
    {
      label: il8n("styleNum.label"),
      prop: "styleNum",
    },
    {
      label: il8n("customerStyleNum.label"),
      prop: "customerStyleNum",
    },
    {
      label: il8n("localTiltAngle.label"),
      prop: "localTiltAngle",
    },
    {
      label: il8n("createdAt.label"),
      prop: "CreatedAt",
      needformatter:true,
      formatter: (CreatedAt) => formatDate(CreatedAt),
    },
    {
      label: il8n("localStyleNum.label"),
      prop: "localStyleNum",
    },
    {
      label: il8n("customerBrand.label"),
      prop: "customerBrand",
    },
    {
      label: il8n("customerTiltAngle.label"),
      prop: "customerTiltAngle",
    },
    {
      label: "创建人",
      prop: "createUser",
      slot: "createUser",
      // formatter: (createdUser) => {
      //     return createdUser?.nickName || ''
      // }
    },
    {
      label: il8n("sbuNum.label"),
      prop: "sbuNum",
    },
    {
      label: il8n("series.label"),
      prop: "series",
    },
    {
      label: il8n("glassType.label"),
      prop: "glassType",
    },
    {
      label: il8n("updatedAt.label"),
      prop: "UpdatedAt",
      needformatter:true,
      formatter: (UpdatedAt) => formatDate(UpdatedAt),
    },
    {
      label: il8n("customerDemandDate.label"),
      prop: "customerDemandDate",
      slot: "customerDemandDate",
      needformatter:true,
    },
    // {
    //   label: "生产地点",
    //   prop: "transferOrder",
    //   slot: "transferOrder",
    // },
    {
      label: il8n("spleenTypeModel.label"),
      prop: "spleenTypeModel",
      descriptionsItemProps:{span:2}
    },
    {
      label: il8n("updateUser.label"),
      prop: "updateUser",
      slot: "updateUser",
      // formatter: (updatedUser) => {
      //     return updatedUser?.nickName || ''
      // }
    },
    {
      label: "第一版本创建时间",
      prop: "FirstCreatedAt",
      slot: "FirstCreatedAt",
    },
    // {
    //   label: "硬模编号",
    //   prop: "hardMoldNum",
    // },
    // {
    //     label: il8n("ptlm_status.label"),
    //     prop: "status",
    // },
  ];
  detailFormColumns.value = newDetailFormColumns;
  //   尺码 columns
  const newSizeColumns = [
    {
      prop: "sizeNum",
      label: il8n("ptlm_size.label"),
      show: true,
      fixedWidth: 100,
      tableColumnProps: {
        fixed: "left",
        sortable: false,
      },
    },
    // {
    //     prop: "ptlm_color",
    //     label: il8n("ptlm_color.label"),
    //     show: true, // 通过 show 来控制列的展示或隐藏
    //     tableColumnProps: {
    //         sortable: false,
    //     },
    //     slot: "color",
    // },
    {
      prop: "luckTilt",
      fixedWidth: 100,
      label: "吉架",
      show: true,
      tableColumnProps: {
        fixed: "right",
        sortable: false,
      },
      slot: "luckTilt",
    },
    {
      prop: "amountTotal",
      label: il8n("ptlm_count.label"),
      show: true,
      fixedWidth: 100,
      tableColumnProps: {
        fixed: "right",
        sortable: false,
        formatter: (row) => {
          return getColorSum(row);
        },
      },
    },
    {
      prop: "drawingList",
      label: il8n("ptlm_drawing_list.label"),
      width: 200,
      show: true,
      tableColumnProps: {
        fixed: "right",
        sortable: false,
      },
      slot: "drawingList",
    },
  ];
  sizeColumns.value = newSizeColumns;
  // 作色要求
  const newColorColumns = [
    {
      prop: "colorNum",
      label: il8n("colorNum.label"),
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "customerColorNum",
      label: il8n("customerColorNum.label"),
      show: true, // 通过 show 来控制列的展示或隐藏
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "customerStyleNum",
      label: il8n("customerStyleNum.label"),
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "localColorDesc",
      label: il8n("localStyleDesc.label"),
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "circleColorRequire",
      label: il8n("circleColorRequire.label"),
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "spleenColorRequire",
      label: il8n("spleenColorRequire.label"),
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "otherColorRequire",
      label: il8n("otherColorRequire.label"),
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
  ];
  colorColumns.value = newColorColumns;
  // 标志\图案工艺说明
  const newSignColumns = [
    {
      prop: "accessoryName",
      label: il8n("accessoryName.label"),
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "position",
      label: il8n("position.label"),
      show: true, // 通过 show 来控制列的展示或隐藏
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "workmanship",
      label: il8n("workmanship.label"),
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "workmanshipColor",
      label: il8n("workmanshipColor.label"),
      show: true, // 通过 show 来控制列的展示或隐藏
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "workmanshipType",
      label: il8n("workmanshipType.label"),
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    // {
    //     prop: "accessoryNum",
    //     label: il8n("accessoryNum.label"),
    //     show: true, // 通过 show 来控制列的展示或隐藏
    //     tableColumnProps: {
    //         sortable: false,
    //     },
    // },
    {
      prop: "signNum",
      label: il8n("signNum.label"),
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "size",
      label: il8n("size.label"),
      show: true, // 通过 show 来控制列的展示或隐藏
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "color",
      label: il8n("color.label"),
      show: true, // 通过 show 来控制列的展示或隐藏
      tableColumnProps: {
        sortable: false,
      },
    },
  ];
  signColumns.value = newSignColumns;
  //  测试标准
  const newTestStandardColumns = [
    {
      prop: "testName",
      label: il8n("testName.label"),
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "isReport",
      label: il8n("isReport.label"),
      show: true, // 通过 show 来控制列的展示或隐藏
      tableColumnProps: {
        sortable: false,
        formatter: (row) => (row.isReport == "true" ? "是" : "否"),
      },
    },
  ];
  testStandardColumns.value = newTestStandardColumns;
  // 历史修改备注
  const newHistoryNoteColumns = [
    {
      prop: "ID",
      label: "序号",
      show: true,
      tableColumnProps: {
        width: "60px",
        type: "index",
      },
    },
    {
      prop: "content",
      label: "更改内容",
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "reason",
      label: "更改原因",
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "detail",
      label: "详情说明",
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "CreatedAt",
      label: "创建时间",
      show: true,
      tableColumnProps: {
        sortable: false,
        formatter: (row) => formatDate(row.CreatedAt, "yyyy-MM-dd hh:mm:ss"),
      },
    },
    {
      prop: "createUser",
      label: "创建人",
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
  ];
  historyNoteColumns.value = newHistoryNoteColumns;

  // 办房复期
  const newBoardMakingColumns = [
    {
      prop: "ID",
      label: "序号",
      show: true,
      tableColumnProps: {
        width: "60px",
        type: "index",
      },
    },
    {
      prop: "deliveryDate",
      label: "复期日",
      show: true,
      tableColumnProps: {
        sortable: false,
        formatter: (row) => formatDate(row.deliveryDate),
      },
    },

    {
      prop: "detailDescription",
      label: "详细说明",
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
    {
      prop: "createUser",
      label: "创建人/时间",
      show: true,
      tableColumnProps: {
        sortable: false,
        formatter: (row) => row.createUser + " " + formatDate(row.CreatedAt),
      },
    },
    {
      prop: "status",
      label: "状态",
      show: true,
      slot: "status",
      tableColumnProps: {
        sortable: false,
      },
    },

    {
      prop: "auditUser",
      label: "审核人/时间",
      show: true,
      tableColumnProps: {
        sortable: false,
        formatter: (row) => row.auditUser + " " + formatDate(row.auditDate),
      },
    },
    {
      prop: "auditDescription",
      label: "审核说明",
      show: true,
      tableColumnProps: {
        sortable: false,
      },
    },
  ];
  boardMakingColumns.value = newBoardMakingColumns;
});
const dict = ref({});
onMounted(async () => {
  const {
    query: { isView },
  } = route;
  if (isView) {
    isViewOp.value = isView == 1;
  }
  // 获取词典
  dict.value = await useDict(
    "contentCate",
    "reasonCate",
    "transferOrder",
    "productionDepartment"
  );
  contentCate.value = dict.value.contentCate;
  reasonCate.value = dict.value.reasonCate;
  // 获取审批流列表
  // getWorkFlowData()
  // 是否首次更新
  getFindFirstOrderProcessingDetail(true);

  // 获取按钮权限
  // const btnAuth = useBtnAuth();
  console.log("btnAuth,===========================", route.meta?.btns);
  if (route.meta?.btns) {
    // 将数组转换成对象
  }

 
});

const setSku = (sizeData1 = [], colorData1 = []) => {
    let sizeData = Array.from(new Set(sizeData1));
    let colorData = Array.from(new Set(colorData1));
    let list = sizeData.reduce((pre, cur, index) => {
        let ll = colorData.map((item) => {
            return cur + " " + item;
        });
        return pre.concat(ll);
    }, []);
    return list;
};

async function getFindFirstOrderProcessingDetail(first) {
  const {
    query: { id, version },
  } = route;
  const res = await findFirstOrderProcessing({ firstOrderNum: id, version });
  if (res.code === 0) {
    const {
      data: {
        refirstOrderProcessing,
        refirstOrderProcessing: {
          sizes = [],
          colors = [],
          accessorySpecs = [],
          signs = [],
          notes = [],
          tests = [],
          mold_house = [],
        },
      },
    } = res;
    detailFormData.value = refirstOrderProcessing;
    detailFormData.value.orderTo = refirstOrderProcessing.orderTo || {};
    detailFormData.value.productionDepartment=detailFormData.value.productionDepartment?detailFormData.value.productionDepartment:'辦房制作部'
    colorMap.value = {};
    let skuList = [];
    sizes?.map((m) => {
      let name = m.drawingList.split("/")[m.drawingList.split("/").length - 1];
      if(!m.drawingName){
          m.drawingName = name
      }
      if (m.colorNum) {
        Object.keys(m.colorNum).forEach(key=>{
          colorMap.value[key] = m.colorNum[key]?m.colorNum[key]:colorMap.value[key]
          if(m.colorNum[key] && m.colorNum[key]>0){
            skuList.push(m.sizeNum + " " + key)
          }
        })
      }
    });
    sizeTableData.value = sizes;
    getBtn(refirstOrderProcessing.status);
    if (first) {
      const col = colors.map((item) => {
        return {
          prop: item.colorNum,
          label: item.colorNum,
          show: true,
          fixedWidth: 80,
          tableColumnProps: {
            sortable: false,
          },
          slot: "color",
        };
      });
      if (col.length > 0) {
        sizeColumns.value.splice(1, 0, ...col);
      }
    }
    colorTableData.value = colors.filter(
      (item) =>
        colorMap.value[item.colorNum] && colorMap.value[item.colorNum] !== "0"
    );
    testStandardDocumentListData.value = tests;
    sourceAccessorySpecs.value = deepClone2(accessorySpecs);
    if (accessorySpecs){
      partTableData.value = initAccessorySpecs(
        accessorySpecs,
        colorTableData.value,
        sizeTableData.value
      );
    }
    // 标志图案说明
    signTableData.value = signs?.filter(item=>{
      let itemSize = item.size?item.size.split(',') : [];
      let itemColor = item.color?item.color.split(',') : [];
      let itemSkuList = setSku(itemSize,itemColor)
      let flag = itemSkuList.some(sku=>{
        return skuList.includes(sku)
      })
      return flag
    });
    // historyNoteTableData.value = notes;
    basicForm.value = {
      testProjectNote: refirstOrderProcessing.testProjectNote,
      firstOrderNote: refirstOrderProcessing.firstOrderNote,
    };
    boardMakingTalbeData.value = mold_house;
    // testStandardDocumentList(refirstOrderProcessing.cumstomerNum);
    // 获取设计图列表
    // ddmsSpecDrawingListList(refirstOrderProcessing.styleNum);

    // 版本不是>1的时候请求版本对比
    if (refirstOrderProcessing.version > 1 && first) {
      getAccessoryData();
    }
  }
}

async function ddmsSpecDrawingListList(styleNum) {
  const res = await getDdmsSpecDrawingListList({ styleNum });
  if (res.code === 0) {
    const { list = [] } = res.data;
    ddmsSpecDrawingListListData.value = list;
  }
}

// async function testStandardDocumentList(customerNum) {
//     const res = await getTestStandardDocumentList({ customerNum });
//     if (res.code === 0) {
//         const { list = [] } = res.data;
//         testStandardDocumentListData.value = list;
//     }
// }

function submitupdateForm(controls) {
  if(detailFormData.value.status === "制辦管理處理中"){
    ElMessage({
        type: "error",
        offset: "25",
        message: "辦房管理處理中不允許改單，請與辦房聯繫退單後修改",
    });
    return
  }
  addNoteForm.value = {};
  // if (detailFormData.value.status === "草稿") {
    emitter.emit("closeThisPage", {
      path: "/layout/firstOrderProcessingAdd",
      query: { id: detailFormData.value.firstOrderNum,dataTime:new Date().getTime() },
    });
  //   return;
  // }
  // confirmEditForm('修改')
  // changeAddNoteDialogFormVisible(true);
  // if (detailFormData.value.submitNums > 0) {
  //     changeAddNoteDialogFormVisible(true);
  // }
  // else {
  //     confirmNoReasonForm(() => {
  //         updateStatus(controls)
  //     })
  // }
}

// 获取颜色的总和
function getColorSum(row) {
  let num = 0;
  for (const key in row.colorNum) {
    num += Number(row.colorNum[key] || 0);
  }
  num += row.luckTilt || 0;
  return num;
}
const editLoading = ref(false)
const confirmEditForm = async(controls) => {
      editLoading.value = true;
      const res = await updateFirstOrderProcessingStatus({
        controls,
        ID: String(detailFormData.value.ID),
        firstOrderProcessingNote:[{content: "更改測試要求", reason: "正常完善B0M資料"}]
      });
      editLoading.value = false;
      if (res.code === 0) {
        if (
          detailFormData.value.status == "制辦管理處理中" ||
          detailFormData.value.status == "草稿" ||
          detailFormData.value.status == "制辦中心處理中"
        ) {
          emitter.emit("closeThisPage", {
            path: "/layout/firstOrderProcessingAdd",
            query: { id: detailFormData.value.firstOrderNum },
          });
        } else {
          emitter.emit("closeThisPage", {
            path: "/layout/firstOrderProcessing",
          });
        }
        basicForm.value = {};
        // changeAddNoteDialogFormVisible(false);
      }
}

async function confirmNoReasonForm(callback) {
  const firstorderProcessing = detailFormData.value;
  firstorderProcessing.sizes = sizeTableData.value;
  let orderAmountSum = 0;
  firstorderProcessing.sizes.forEach((item) => {
    item.amountTotal = getColorSum(item);
    orderAmountSum += Number(item.amountTotal);
  });
  firstorderProcessing.orderAmountSum = orderAmountSum;
  firstorderProcessing.colors = colorTableData.value;
  firstorderProcessing.accessorySpecs = sourceAccessorySpecs.value;
  firstorderProcessing.signs = signTableData.value;
  // firstorderProcessing.notes = historyNoteTableData.value; 无需备注
  firstorderProcessing.tests = testStandardDocumentListData.value;
  firstorderProcessing.testProjectNote = basicForm.value.testProjectNote;
  firstorderProcessing.firstOrderNote = basicForm.value.firstOrderNote;
  const params = { ...firstorderProcessing };
  console.log("params=============", params);
  const res = await updateFirstOrderProcessing(params);
  if (res.code === 0) {
    addNoteForm.value = {};
    basicForm.value = {};
    ElMessage({
      type: "success",
      message: "修改成功",
    });
    getFindFirstOrderProcessingDetail();
    callback && callback();
  }
}

async function updateStatus(controls, confirm) {
  if (confirm) {
    ElMessageBox.confirm(`确定要${controls}吗?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      confirmUpdateStatus(controls);
    });
  } else {
    confirmUpdateStatus(controls);
  }
}

async function confirmUpdateStatus(controls) {
  const res = await updateFirstOrderProcessingStatus({
    controls,
    ID: String(detailFormData.value.ID),
  });
  if (res.code === 0) {
    // if (controls === '同意') {
    //     router.push({
    //     path: "/layout/firstOrderProcessing"
    //     });
    //     return
    // }
    getFindFirstOrderProcessingDetail();
    ElMessage({
      type: "success",
      message: "首办单修改成功",
    });
    emitter.emit("closeThisPage", {
      path: "/layout/firstOrderProcessing",
      query: {},
    });
  }
}

// async function handleSubmit(controls) {
//     const firstorderProcessing = detailFormData.value;
//     firstorderProcessing.sizes = sizeTableData.value;;
//     firstorderProcessing.colors = colorTableData.value;
//     firstorderProcessing.accessorySpecs = sourceAccessorySpecs.value;
//     firstorderProcessing.signs = signTableData.value;
//     firstorderProcessing.notes = historyNoteTableData.value;
//     firstorderProcessing.tests = testStandardDocumentListData.value
//     firstorderProcessing.testProjectNote =
//         basicForm.value.testProjectNote;
//     firstorderProcessing.firstOrderNote =
//         basicForm.value.firstOrderNote;
//     const params = { ...firstorderProcessing };
//     console.log("params=============", params);
//     const res = await updateFirstOrderProcessing(params);
//     if (res.code === 0) {
//         updateStatus(controls)
//     }

// }

function initBtn() {
  printViewBtn.value = false;
  printBtn.value = false;
  saveBtn.value = false;
  editBtn.value = false;
  stopBtn.value = false;
  cancelBtn.value = false;
  recoverBtn.value = false;
  completeBtn.value = false;
  checkSuccessBtn.value = false;
  equipmentPrintBtn.value = false;
  submitHandleBtn.value = false;
  submitHandleBtn1.value = false;
  agreeUpdateBtn.value = false;
  refuseUpdateBtn.value = false;
  rebackBtn.value = false;
  customerSubmitBtn.value = false;
  exportDocumentBtn.value = false;
  toSapBtn.value = false;
  leiyinBtn.value = false;
}

async function getBtn(status) {
  initBtn();
  toSapBtn.value = true;
  switch (status) {
    case "草稿":
      editBtn.value = true;
      submitHandleBtn1.value = true;
      break;
    case "暫停確認中":
    case "終止確認中":
    case "改單審批中":
      agreeUpdateBtn.value = true;
      refuseUpdateBtn.value = true;
      break;
    case "暫停":
      recoverBtn.value = true;
      break;
    case "制辦中心處理中":
      exportDocumentBtn.value = true;
      leiyinBtn.value = true;
    case "制辦管理處理中":
      editBtn.value = true;
      stopBtn.value = true;
      cancelBtn.value = true;
      printViewBtn.value = true;
      printBtn.value = true;
      leiyinBtn.value = true;
      completeBtn.value =
        status === "制辦中心處理中" &&
        detailFormData.value.printStatus === "已打印";
      submitHandleBtn.value =
        status === "制辦管理處理中" &&
        detailFormData.value.printStatus === "已打印"
          ? true
          : false;
      exportDocumentBtn.value = true;
      rebackBtn.value = status === "制辦管理處理中"
      break;
    case "首辦單完成":
      printViewBtn.value = true;
      customerSubmitBtn.value = true;
      break;
  }
}

function validNumber(data, type) {
  data[type] = data[type].replace(/[^0-9]/gi, "");
}
// 后端路径
const path1 = ref(import.meta.env.VITE_BASE_API + "/");
async function print(flag) {
  let params = { firstOrderNum: detailFormData.value.firstOrderNum };
  if (flag) {
    params["isPreview"] = '1';
  }
  const res = await firstOrderProcessingPrint(params);
  if (res.code === 0) {
    const fileUrl = path1.value + res.data.fileUrl;
    if (!fileUrl) return;
    // if (flag) {
    //   router.push({
    //     path: "/layout/print",
    //     query: { fileUrl: encodeURIComponent(fileUrl), flag: flag },
    //   });
    // } else {
      const link = document.createElement("a");
      link.href = fileUrl;
      const name = res.data.fileUrl.split("/")[res.data.fileUrl.split("/").length - 1];
      link.setAttribute("download", name);
      link.click();
    //   emitter.emit("reload");
    // }
  }
}

function addBoardMaking() {
  boardMakingForm.value = {};
  changeBoardMakingVisible(true);
}

function auditBoardMaking(row) {
  auditBoardMakingForm.value = {
    ID: row.ID,
  };
  changeAuditBoardMakingVisible(true);
}

// 获取办房复期
async function getFirstOrderMoldHouseList(firstOrderNum) {
  if (detailFormData.value.firstOrderNum) {
    const res = await firstOrderMoldHouseList({ firstOrderNum });
    if (res.code === 0) {
      boardMakingTalbeData.value = res.data.list;
    }
  }
}

function addBoardMakingSubmit() {
  boardMakingFormRef.value.validate(async (valid) => {
    if (valid) {
      const params = {
        ...boardMakingForm.value,
        firstOrderNum: detailFormData.value.firstOrderNum,
      };
      console.log("params==============", params);
      const res = await createFirstOrderMoldHouse(params);
      if (res.code === 0) {
        boardMakingForm.value = {};
        ElMessage({
          type: "success",
          message: "添加成功",
        });
        changeBoardMakingVisible(false);
        getFirstOrderMoldHouseList(params.firstOrderNum);
      }
    }
  });
}

function auditBoardMakingSubmit() {
  auditBoardMakingFormRef.value.validate(async (valid) => {
    if (valid) {
      const params = {
        ...auditBoardMakingForm.value,
        firstOrderNum: detailFormData.value.firstOrderNum,
      };
      console.log("audit params========================", params);
      const res = await updateFirstOrderMoldHouse(params);
      if (res.code === 0) {
        auditBoardMakingForm.value = {};
        ElMessage({
          type: "success",
          message: "审核成功",
        });
        changeAuditBoardMakingVisible(false);
        getFirstOrderMoldHouseList(params.firstOrderNum);
      }
    }
  });
}

function getSumaryMethod(SummaryMethodProps) {
  const { columns, data } = SummaryMethodProps;
  const sums = [];

  columns.forEach((column, index) => {
    if (column.property === "luckTilt") {
      sums[index] = "合计";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));

    if (
      column.property === "amountTotal" &&
      !values.every((value) => Number.isNaN(value))
    ) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
    }
  });
  return sums;
}

// 新增与上版本配件对比
const addAccessory = ref([]);
const deleteAccessory = ref([]);
function getAccessoryData(params) {
  const {
    query: { id },
  } = route;
  let dd = { firstOrderNum: id }
  if(route.query.version) dd['version'] = route.query.version
  versionComparison(dd).then((res) => {
    if (res.code == 0) {
      addAccessory.value = [];
      deleteAccessory.value = [];
      if (res.data.Add) {
        res.data.Add.map((item) => {
          let idx = addAccessory.value.findIndex(p=>{
            return p == (item.componentNum || '') + (item.colorNum || '')
          })
          let p = (item.componentNum || '') + (item.colorNum || '')
          if(idx == -1 && p){
            addAccessory.value.push(p);
          }
        });
      }
      if (res.data.Decrease) {
        res.data.Decrease.map((item) => {
          let idx = deleteAccessory.value.findIndex(p=>{
            return p == (item.componentNum || '') + (item.colorNum || '')
          })
          let p = (item.componentNum || '') + (item.colorNum || '')
          if(idx == -1 && p){
            deleteAccessory.value.push(p);
          }
        });
      }
    }
  });
}

function confirmOrder() {
  confirmOrderVisible.value = true;
}

function handleConfirmOrder() {
  confirmOrderFormRef.value?.validate(async (valid) => {
    if (valid) {
      const params = {
        ...confirmOrderForm.value,
        ID: String(detailFormData.value.ID),
      };
      const res = await customerConfirmFirstOrderTime(params);
      if (res.code === 0) {
        ElMessage({
          type: "success",
          message: "确认成功",
        });
        confirmOrderVisible.value = false;
        // getFindFirstOrderProcessingDetail()

        emitter.emit("closeThisPage", {
          path: "/layout/firstOrderProcessing",
          query: {},
        });
        // window.location.reload()
        // setTimeout(() => {
        //     emitter.emit("reload");
        // }, 0)
      }
    }
  });
}

function applyWork() {
  applyWorkForm.value.workflowdef_id = workflowList.value.ID || "";
  applyWorkVisible.value = true;
}

function submitApplyWork() {
  applyWorkFormRef.value.validate(async (valid) => {
    // createApplication
    if (valid) {
      const params = {
        ...applyWorkForm.value,
        detail_url: `/#/layout/firstOrderProcessingEdit?id=${detailFormData.value.firstOrderNum}&subTitle=${detailFormData.value.firstOrderNum}&isView=true`,
        notify_url_approved: `firstOrder/applicationNotify?id=${detailFormData.value.firstOrderNum}&action=approved`,
        notify_url_rejected: `firstOrder/applicationNotify?id=${detailFormData.value.firstOrderNum}&action=rejected`,
      };
      const res = await createApplication(params);
      if (res.code === 0) {
        ElMessage({
          type: "success",
          message: "申请审批成功",
        });
        emitter.emit("closeThisPage", {
          path: "/layout/firstOrderProcessing",
          query: {},
        });
      }
    }
  });
}

// 查询
const getWorkFlowData = () => {
  const params = {
    page: 1,
    pageSize: 999,
    module_name: "first_order",
  };
  // 查询
  findWorkflowDef(params).then((res) => {
    if (res.code === 0) {
      workflowList.value = res.data.Workflow;
    }
  });
};

// 下载
const downloadFile = (row) => {
  let params = {
        drawingName: row.drawingName,
        fileUrl: row.drawingList,
    };
    downloadFilePost(params).then((data) => {
      if (data.response && data.response.status == 404) {
          ElMessage({
              type: "warning",
              message: "文件不存在",
          });
          return;
      }
      let blob = new Blob([data.data], {});
      const fileName = row.drawingName;
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link); // 下载完成移除元素
      window.URL.revokeObjectURL(url); // 释放掉blob对象
  });
  // let fileUrl;
  // if (
  //     row.drawingList.indexOf("http://") > -1 ||
  //     row.drawingList.indexOf("https://") > -1
  // ) {
  //     fileUrl = row.drawingList.replace(new RegExp("#", "g"), "");
  // } else {
  //     fileUrl =
  //         path1.value + row.drawingList.replace(new RegExp("#", "g"), "");
  // }
  // const x = new XMLHttpRequest();
  // x.open("GET", fileUrl, true);
  // x.responseType = "blob";
  // x.onload = (e) => {
  //     let { status, readyState } = x;
  //     if (status === 200 && readyState === 4) {
  //         // 会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
  //         const url = window.URL.createObjectURL(x.response);
  //         const a = document.createElement("a");
  //         a.href = url;
  //         let name = row.drawingList.split("/")[row.drawingList.split("/").length - 1];
  //         a.download = row.drawingName?row.drawingName.replace(new RegExp("#", "g"), ""):name;
  //         a.click();
  //     } else {
  //         if (status === 404) {
  //             ElMessage({
  //                 type: "warning",
  //                 message: "文件不存在",
  //             });
  //         } else {
  //             ElMessage({
  //                 type: "warning",
  //                 message: "下载出错",
  //             });
  //         }
  //     }
  // };
  // x.send();
};

function productionDepartmentChange(params) {
  updateProductionDepartment({
    ID: detailFormData.value.ID,
    productionDepartment: params,
  }).then((res) => {
    if (res.code === 0) {
      ElMessage({
        type: "success",
        message: "修改制作部门成功",
      });
    }
  });
}
// 导出物料清单
function firstOrderProcessingExportFun() {
  firstOrderProcessingExport({ ID: detailFormData.value.ID }).then((res) => {
    if (res.code === 0) {
      const path1 = import.meta.env.VITE_BASE_API + "/";
      const fileUrl = path1 + res.data.fileUrl;
      const link = document.createElement("a");
      link.href = fileUrl;
      let name =
        res.data.fileUrl.split("/")[res.data.fileUrl.split("/").length - 1];
      link.setAttribute("download", name);
      link.click();
    }
  });
}
// 汇入sap
const createInSapByHandLoading = ref(false);
function createInSapByHandFun() {
  createInSapByHandLoading.value = true;
  createInSapByHand({ ID: detailFormData.value.ID })
    .then((res) => {
      createInSapByHandLoading.value = false;
      if (res.code == 0) {
        ElMessage({
          type: "success",
          message: "汇入成功",
        });
      }
    })
    .catch((err) => {
      createInSapByHandLoading.value = false;
    });
}

// 打印预览----------------------------------------------------------
const printPartTableData = ref([]);
// 给树中增加层级字段并变成数组
function addLevelField(tree, selfLevel = 1) {
  for (let node of tree) {
    if (node) {
      node.selfLevel = selfLevel; // 在节点上添加selfLevel字段
      printPartTableData.value.push(node);
      if (node.children && node.children.length > 0) {
        addLevelField(node.children, selfLevel + 1); // 递归处理子节点
      }
    }
  }
  return tree; // 返回处理后的树
}

const previewDialogShow = ref(false);
function preview(params) {
  console.log("检查是不是有数据错误的问题:", partTableData.value);
  printPartTableData.value = []
  addLevelField(partTableData.value);
  previewDialogShow.value = true;
}

function closePreview(params) {
  previewDialogShow.value = false;
}

function editPrintStatus(params) {
  moldHousePrint({firstOrderNum: detailFormData.value.firstOrderNum})
}

function getPrintStyle() {
  return `@page{marign:0;padding:0;}
 .one-box {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	padding-bottom: 6px;
	border-bottom: 2px solid rgb(240, 240, 240);
}
.one-box > div {
	 font-size: 18px !important;
	text-align: left;
	width: 33.33%;
}
.one-box > div:last-child {
	margin-top: 10px;
	text-align: right;
}
.one-box .ftsz10px {
	font-size: 6px !important;
}
.content-box {
	margin-top: 4px;
}
.content-box .title {
	margin-bottom: 4px;
	font-size: 8px;
	font-weight: bold;
}
.content-box .content {
	border-top: 2px solid rgb(240, 240, 240);
	border-bottom: 2px solid rgb(240, 240, 240);
	padding: 10px 0 0px;
}
.content-box .content .descriptions {
	display: flex;
	flex-wrap: wrap;
	font-size: 6px !important;
}
.content-box .content .descriptions .descriptionsItem {
	width: 25%;
	margin-bottom: 2px;
	font-size: 6px !important;
}
.content-box .content .descriptions .addLine {
	margin-bottom: 2px;
	width: 100%;
	font-size: 6px !important;
}
.content-box .content .myTable-head {
	display: flex;
	justify-content: space-around;
	text-align: left;
	padding-bottom: 2px;
	border-bottom: 3px solid rgb(240, 240, 240);
}
.content-box .content .myTable-head > div {
	flex: 4;
	font-size: 6px !important;
}
.content-box .content .myTable-head > div:first-child {
	flex: 2;
}
.content-box .content .myTable-head > div:nth-child(3) {
	flex: 2;
}
.content-box .content .myTable-content {
	display: flex;
	justify-content: space-around;
	text-align: left;
	margin-top: 1px;
	padding-bottom: 1px;
	border-bottom: 1px solid rgb(240, 240, 240);
}
.content-box .content .myTable-content > div {
	flex: 4;
	font-size: 6px !important;
	padding: 0 2px;
}
.content-box .content .myTable-content > div:first-child {
	flex: 2;
}
.content-box .content .myTable-content > div:nth-child(2) {
	flex: 2;
}
.content-box .content .myTable-content > div:nth-child(3) {
	flex: 2;
}
.content-box .content .myTable-content:last-child {
	border-bottom: 0px solid rgb(240, 240, 240);
}
.table1 .myTable-head > div,
.table1 .myTable-content > div {
	flex: 10 !important;
}
.table1 .myTable-head > div:first-child,
.table1 .myTable-content > div:first-child {
	flex: 2 !important;
}
.table1 .myTable-head > div:nth-child(2),
.table1 .myTable-content > div:nth-child(2) {
	flex: 9 !important;
}
.table1 .myTable-head > div:nth-child(3),
.table1 .myTable-content > div:nth-child(3) {
	flex: 12 !important;
}
.table2 .myTable-head > div,
.table2 .myTable-content > div {
	flex: 10 !important;
	word-break: break-all;
}
.table2 .myTable-head > div:first-child,
.table2 .myTable-content > div:first-child {
	flex: 10 !important;
}
.table2 .myTable-head > div:nth-child(2),
.table2 .myTable-content > div:nth-child(2) {
	flex: 4 !important;
}
.table2 .myTable-head > div:nth-child(5),
.table2 .myTable-content > div:nth-child(5) {
	flex: 4 !important;
}
.table2 .myTable-head > div:nth-child(6),
.table2 .myTable-content > div:nth-child(6) {
	flex: 4 !important;
}
.table2 .myTable-head > div:nth-child(7),
.table2 .myTable-content > div:nth-child(7) {
	flex: 4 !important;
}
.table3 .myTable-head > div,
.table3 .myTable-content > div {
	flex: 10 !important;
}
.table3 .myTable-head > div:first-child,
.table3 .myTable-content > div:first-child {
	flex: 5 !important;
}
.table3 .myTable-head > div:nth-child(2),
.table3 .myTable-content > div:nth-child(2) {
	flex: 5 !important;
}
.table3 .myTable-head > div:nth-child(3),
.table3 .myTable-content > div:nth-child(3) {
	flex: 5 !important;
}
.table3 .myTable-head > div:nth-child(4),
.table3 .myTable-content > div:nth-child(4) {
	flex: 15 !important;
}
.table3 .myTable-head > div:nth-child(5),
.table3 .myTable-content > div:nth-child(5) {
	flex: 3 !important;
}
.table3 .myTable-head > div:nth-child(6),
.table3 .myTable-content > div:nth-child(6) {
	flex: 6 !important;
}
.table3 .myTable-head > div:nth-child(7),
.table3 .myTable-content > div:nth-child(7) {
	flex: 10 !important;
}
.table3 .myTable-head > div:nth-child(8),
.table3 .myTable-content > div:nth-child(8) {
	flex: 5 !important;
}
.table4 .myTable-head > div,
.table4 .myTable-content > div {
	flex: 10 !important;
}
.table4 .myTable-head > div:first-child,
.table4 .myTable-content > div:first-child {
	flex: 8 !important;
}
.table4 .myTable-head > div:nth-child(2),
.table4 .myTable-content > div:nth-child(2) {
	flex: 8 !important;
}
.table4 .myTable-head > div:nth-child(3),
.table4 .myTable-content > div:nth-child(3) {
	flex: 14 !important;
}
  `;
}
</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");
.gva-form-box {
  :deep(.my-label) {
    width: 9%;
  }
  :deep(.my-content) {
    width: 16%;
  }
}
.list-header {
  margin-top: 20px;
}
:deep(.el-descriptions__label) {
  width: 9%;
}
:deep(.el-descriptions__content) {
  width: 16%;
  word-break: break-all;
  white-space: pre-wrap;
}
.large-order-form {
  :deep(.el-form-item__label) {
    width: 96px;
  }
}
:deep(.el-table__expand-icon) {
  // display: none !important;
  opacity: 0;
}

.version-PK {
  :deep(.delete-acc) {
    background: #fd9595 !important;
    color: #000 !important;
  }

  :deep(.el-descriptions__label) {
    width: 2%;
  }
}
:deep(.table-style-1){
    .el-table__cell{
        vertical-align: top !important;
    }    
}

// 预览
.one-box {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  > div {
     font-size: 18px !important;
    text-align: left;
    width: 33.33%;
    &:last-child {
      margin-top: 10px;
      text-align: right;
    }
  }

  padding-bottom: 6px;
  border-bottom: 2px solid rgb(240, 240, 240);

  .ftsz10px {
    font-size: 8px !important;
  }
}

.content-box {
  margin-top: 4px;
  .title {
    margin-bottom: 4px;
    font-size: 8px;
    font-weight: bold;
  }

  .content {
    border-top: 2px solid rgb(240, 240, 240);
    border-bottom: 2px solid rgb(240, 240, 240);
    padding: 10px 0 0px;

    .descriptions {
        display: flex;
        flex-wrap: wrap;
        font-size: 8px !important;
        .descriptionsItem {
            width: 25%;
            margin-bottom: 2px;
            font-size: 8px !important;
        }
        .addLine {
            margin-bottom: 2px;
            width: 100%;
            font-size: 8px !important;
        }
    }
    .myTable-head {
      display: flex;
      justify-content: space-around;
      text-align: left;
      padding-bottom: 2px;
      > div {
        flex: 4;
        font-size: 8px !important;
        &:first-child {
          flex: 2;
        }
        &:nth-child(3) {
          flex: 2;
        }
      }

      border-bottom: 3px solid rgb(240, 240, 240);
    }
    .myTable-content {
      display: flex;
      justify-content: space-around;
      text-align: left;
      margin-top: 1px;
      padding-bottom: 1px;
      > div {
        flex: 4;
        font-size: 8px !important;
        padding: 0 2px;
        &:first-child {
          flex: 2;
        }
        &:nth-child(2) {
          flex: 2;
        }
        &:nth-child(3) {
          flex: 2;
        }
      }

      border-bottom: 1px solid rgb(240, 240, 240);
      &:last-child {
        border-bottom: 0px solid rgb(240, 240, 240);
      }
    }
  }
}

.table1 {
  .myTable-head,
  .myTable-content {
    > div {
      flex: 10 !important;
      &:first-child {
        flex: 2 !important;
      }
      &:nth-child(2) {
        flex: 9 !important;
      }
      &:nth-child(3) {
        flex: 12 !important;
      }
    }
  }
}

.table2 {
  .myTable-head,
  .myTable-content {
    > div {
      flex: 10 !important;
      word-break: break-all;

      &:first-child {
        flex: 10 !important;
      }
      &:nth-child(2) {
        flex: 4 !important;
      }

      &:nth-child(5) {
        flex: 4 !important;
      }
      &:nth-child(6) {
        flex: 4 !important;
      }
      &:nth-child(7) {
        flex: 4 !important;
      }
    }
  }
}

.table3 {
  .myTable-head,
  .myTable-content {
    > div {
      flex:10 !important;
      &:first-child {
        flex: 5 !important;
      }
      &:nth-child(2) {
        flex: 5 !important;
      }
      &:nth-child(3) {
        flex: 5 !important;
      }
      &:nth-child(4) {
        flex: 15 !important;
      }
      &:nth-child(5) {
        flex: 3 !important;
      }
      &:nth-child(6) {
        flex:6 !important;
      }
      &:nth-child(7) {
        flex: 10 !important;
      }
      &:nth-child(8) {
        flex: 5 !important;
      }
    }
  }
}

.table4 {
  .myTable-head,
  .myTable-content {
    > div {
      flex: 10 !important;
      &:first-child {
        flex: 8 !important;
      }
      &:nth-child(2) {
        flex: 8 !important;
      }
      &:nth-child(3) {
        flex: 14 !important;
      }
    }
  }
}
::v-deep  .el-input.is-disabled .el-input__inner {
    -webkit-text-fill-color: black;
    cursor: not-allowed;
}
:deep(.el-textarea.is-disabled .el-textarea__inner){
    background-color: #fff;
  color: var(--el-text-color-primary);
}
:deep(.el-input.is-disabled .el-input__inner){
    background-color: #fff;
  color: var(--el-text-color-primary);
  -webkit-text-fill-color: var(--el-text-color-primary);
}
:deep(.el-select__wrapper.is-disabled){
    background-color: #fff;
  color: var(--el-text-color-primary);
  -webkit-text-fill-color: var(--el-text-color-primary);
}
</style>
